<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        position: relative;
    }
    
    .container {
        text-align: center;
    }
    
    .welcome img {
        position: absolute;
        left: 5px;
        top: -80px;
        animation-name: hello;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    
    @keyframes hello {
        0% {
            transform: scale(0) rotate(0);
        }
        100% {
            transform: scale(1.5) rotate(360deg);
        }
    }
    
    .welcome {
        position: absolute;
        top: 460px;
        left: 180px;
        font-size: 40px;
        color: rgb(51, 95, 68);
        display: inline-block;
    }
    
    .welcome p {
        letter-spacing: 30px;
        color: rgb(247, 147, 90);
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        line-height: 100px;
    }
    
    .content {
        position: absolute;
        top: 620px;
        right: 200px;
        font-size: 20px;
        margin-left: 60px;
        color: black;
    }
    
    .content a {
        text-decoration: none;
        color: rgb(48, 75, 51);
        padding-left: 50px;
    }
    
    .content a:hover {
        letter-spacing: 2px;
        font-size: 30px;
        text-align: center;
    }
    
    .jieshao {
        position: absolute;
        top: 800px;
        left: 100px;
        display: inline-block;
        text-align: center;
        font-size: 35px;
    }
    
    .jieshao h1 {
        margin-left: 80px;
        color: brown;
        margin-bottom: 100px;
    }
    
    .one {
        display: inline-block;
        margin-left: 70px;
    }
    
    .one img:hover {
        transform: scale(1.5);
        transition: all 2s;
    }
    
    .two {
        display: inline-block;
        margin-left: 70px;
    }
    
    .two img:hover {
        transform: scale(1.5);
        transition: all 2s;
    }
    
    .three {
        display: inline-block;
        margin-left: 70px;
    }
    
    .three img:hover {
        transform: scale(1.5);
        transition: all 2s;
    }
    
    .four {
        display: inline-block;
        margin-left: 70px;
    }
    
    .four img:hover {
        transform: scale(1.5);
        transition: all 2s;
    }
    
    .jieshao a {
        text-decoration: none;
        color: rgb(252, 187, 144);
        font-size: 30px;
    }
    
    .jieshao a:hover {
        font-size: 35px;
        text-align: center;
        background-color: rgb(250, 233, 210);
    }
    
    .jieshao p {
        font-size: 22px;
    }
    
    .zuopin {
        position: absolute;
        top: 1700px;
    }
    
    .zuopin h1 {
        margin-top: -150px;
        font-size: 60px;
        color: brown;
        margin-left: 540px;
    }
    
    .p1 {
        position: absolute;
        top: 20px;
        left: 450px;
        z-index: 1;
        animation-name: p1;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes p1 {
        0% {
            transform: translate(0);
        }
        10% {
            transform: translatex(-320px);
        }
        20% {
            transform: translatey(250px) translateX(-320px);
        }
        40% {
            transform: translatey(250px) translateX(290px);
        }
        50% {
            transform: translateX(290px) translateY(-150px);
        }
        100% {
            transform: translateY(-150px)translateX(0px);
        }
    }
    
    .p2 {
        position: absolute;
        top: 80px;
        left: 130px;
        animation-name: p2;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes p2 {
        0% {
            transform: translate(0);
        }
        10% {
            transform: translatey(150px) translateX(0);
        }
        20% {
            transform: translatey(150px) translateX(610px);
        }
        40% {
            transform: translatey(-250px) translateX(510px);
        }
        50% {
            transform: translateX(-50px) translateY(-250px);
        }
        100% {
            transform: translateY(0px)translateX(-50px);
        }
    }
    
    .p3 {
        position: absolute;
        top: 80px;
        left: 730px;
        animation-name: p3;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes p3 {
        0% {
            transform: translate(0);
        }
        10% {
            transform: translatey(-150px) translateX(0);
        }
        20% {
            transform: translatey(-150px) translateX(-510px);
        }
        40% {
            transform: translatey(250px) translateX(-510px);
        }
        50% {
            transform: translateX(80px) translateY(250px);
        }
        100% {
            transform: translateY(0px)translateX(80px);
        }
    }
    
    .lianxi h1 {
        position: absolute;
        top: 2300px;
        left: 540px;
        font-size: 60px;
        color: brown;
    }
    
    .lianxi img {
        position: absolute;
        top: 2440px;
        left: 540px;
        animation-name: dingzi;
        animation-duration: 7s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    
    @keyframes dingzi {
        0% {
            transform: rotate(0);
        }
        25% {
            transform: rotate(45deg);
        }
        50% {
            transform: rotate(-45deg);
        }
        /* 75% {
            transform: rotate(-90deg);
        } */
        100% {
            transform: rotate(45deg);
        }
    }
</style>

<body>
    <audio src="昼夜 - 千与千寻 (钢琴版).mp3" autoplay></audio>
    <div class="container">
        <img src="资源 3.jpg" width="1390px">
        <div class="welcome" id="shouye">
            <img src="logo.jpg" width="95px">
            <h1>Welcome To</h1>

            <p>花开富贵</p>
            <!-- <div class="logo">
                <img src="logo.jpg" width="95px">
            </div> -->
        </div>
        <div class="content">
            <a href="#shouye">首页</a>
            <a href="#jieshao">介绍</a>
            <a href="#zuopin">作品</a>
            <a href="#lianxi">联系</a>
        </div>
        <div class="jieshao" id="jieshao">
            <h1>Meet Our Talented Mebmers</h1>
            <div class="one">
                <img src="1.jpg" width="200px">
                <br>
                <a href="http://euygnet-up.gitee.io/final-project-" target="_blank">YueTeng.Pu</a>

                <p>代码编辑</p>

            </div>
            <div class="two">
                <img src="2.jpg" width="200px">
                <br>
                <a href="http://zou-xinsheng.gitee.io/personal-web-sites" target="_blank">ShengXin.Zhou</a>
                <p>背景设计</p>

            </div>
            <div class="three">
                <img src="3.jpg" width="200px">
                <br>
                <a href="http://yys2001.gitee.io/personal-website-2/" target="_blank">YangXu</a>
                <p>素材收集</p>
            </div>
            <div class="four">
                <img src="4.jpg" width="200px">
                <br>
                <a href="http://zlq333.gitee.io/personal-website/" target="_blank">LiQin.Zhao</a>
                <p>页面布局</p>
            </div>
        </div>

        <div class="zuopin" id="zuopin">
            <h1>Our Works</h1>
            <img src="5.png" width="500px" class="p1">
            <img src="6.png" width="500px" class="p2">
            <img src="7.png" width="500px" class="p3">
        </div>
        <div class="lianxi">
            <h1 id="lianxi">Contact Us </h1>
            <img src="钉子.jpg" width="400px">

        </div>

    </div>
</body>

</html>